<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 17:06:41
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-06 15:25:01
 * @FilePath: /web/src/components/lineChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index-page">
    <div class="page-child">
      <div class="model-child">
        <!-- <model style="height: 100%" :path="'/models/外环.glb'" type="glb"></model> -->
      </div>
      <div class="close" @click="close">
        <i class="el-icon-arrow-down" v-if="!isShow"></i>
        <i class="el-icon-arrow-up" v-if="isShow"></i>
      </div>
      <div class="page-index" v-if="!isShow">
        <div class="left-page">
          <div class="plan">
            <div class="title">
              <img src="../../assets/images/u39.svg" alt="" />
              <div class="statistics">计划统计</div>
            </div>
            <div class="right"><span class="yellow">已生产</span>/计划任务</div>
            <div class="progress" v-for="item in totalTaskList">
              <div style="position: relative">
                <div class="left"></div>
                <div class="right1"></div>
                <div class="text" v-if="item.prodType === 'ggj'" style="color: #00ffff">
                  钢拱架产线
                </div>
                <div class="text" v-if="item.prodType === 'wp'" style="color: #00ffff">
                  网片产线
                </div>
                <div class="text" v-if="item.prodType === 'xdg'" style="color: #00ffff">
                  小导管产线
                </div>
                <div class="text" v-if="item.prodType === 'ljg'" style="color: #00ffff">
                  连接钢板产线
                </div>
                <div class="blue"></div>
                <div class="blue1"></div>
                <div class="middle">
                  <div class="line" v-if="item.prodType === 'ggj'" style="background-color: #fccd1d"
                    v-for="index in item.lineNum"></div>
                  <div class="line" v-if="item.prodType === 'wp'" style="background-color: #00ffff"
                    v-for="index in item.lineNum"></div>
                  <div class="line" v-if="item.prodType === 'xdg'" style="background-color: #70b603"
                    v-for="index in item.lineNum"></div>
                  <div class="line" v-if="item.prodType === 'ljg'" style="background-color: #70b603"
                    v-for="index in item.lineNum"></div>
                  <div class="line" v-for="index in 20 - item.lineNum"></div>
                </div>
                <div class="total">
                  <span class="yellow">{{ item.finishNum }}</span>/{{ item.planNum }}
                </div>
              </div>
            </div>
          </div>
          <div class="record" style="margin-top: 10px;height: 273px;">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%;">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">库存信息</div>
            </div>
            <pie-chart :chartData="chartData" :height="'240px'"></pie-chart>
          </div>
          <div class="record" style="margin-top: 10px;height: 288px;">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">产量走势</div>
            </div>
            <lineChart :lineChart="lineChart"></lineChart>
          </div>
        </div>
        
        <div class="right-page">
          <div class="record" style="margin-top: 10px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">工厂介绍</div>
            </div>
            <div class="introduce" v-html="projectInfo"></div>
          </div>
          

          <div class="record" style="margin-top: 10px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">宣传视频</div>
            </div>
            <video controls width="380" height="210" ref="video" style="margin: 10px">
              <source
                src="http://8.130.75.109:9001/steel-arch/2024/10/29/%E9%92%A2%E6%9E%84%E5%8E%82%E5%AE%A3%E4%BC%A0%E7%89%87%E7%A4%BA%E6%84%8F.mp4"
                type="video/mp4" />
              Sorry, your browser doesn't support embedded videos.
            </video>
          </div>
          <div class="record environment" style="margin-top: 0px">
            <div class="top">
              <div class="left">
                <img src="../../assets/images/kuohao.png" alt="" />
              </div>
              <div class="right" style="width: 100%">
                <img src="../../assets/images/u193.svg" alt="" />
              </div>
              <div class="text">环境信息</div>
            </div>
            <div class="right"
              style="display: block;width: 100%;position: absolute;top:100px;left: 30px;">
              <img src="../../assets/images/weather_logo.png"   style="width: 80px;height: 80px;"alt="" />
            </div>
            <div style="height: 270px; position: relative">
              <div style="position: absolute; left: 10px; bottom: 10px">
                <span class="temp">{{ weather.temp }}</span><span style="font-size: 20px" class="temp"> ℃</span>
                <div style="font-size: 15px; color: rgb(182, 211, 237)">
                  空气质量:{{ airData.category }}
                </div>
              </div>
              <div style="position: absolute; left: 140px; top: 60px">
                <div class="title">PM2.5</div>
                <span class="other">{{ airData.pm2p5 }}</span><span class="unit">μg/m³</span>
              </div>
              <div style="position: absolute; left: 310px; top: 60px">
                <div class="title">PM10</div>
                <span class="other">{{ airData.pm10 }}</span><span class="unit">μg/m³</span>
              </div>
              <div style="position: absolute; left: 140px; bottom: 60px">
                <div class="title">湿度</div>
                <span class="other">{{ weather.humidity }}</span><span class="unit">%</span>
              </div>
              <div style="position: absolute; left: 310px; bottom: 60px">
                <div class="title">风速</div>
                <span class="other">{{ weather.windSpeed }}</span><span class="unit">10m/S</span>
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAirNow } from "@/api/weather";
import pieChart from "../../components/pieChart/index.vue";
import lineChart from "../../components/lineChart/index.vue";
import model from "./model_index.vue";
// import modelIndex from "./model_index.vue";
import { getDetail } from "@/api/introduce";
import {
  getTotalTask,
  getInventory,
  getTaskRecordByDay,
} from "../../api/bigScreen";
export default {
  components: {
    pieChart,
    lineChart,
    model,
    // modelIndex,
  },
  props: { weather: { type: Object, default: () => { } },changeIndex: { type: Number, default: 0 } },
  data() {
    return {
      airData: {
        pm2p5: 10,
        pm10: 10,
        category: "优",
      },
      projectInfo: "",
      isShow:false,
      totalTaskList: [
        {
          planNum: 0,
          finishNum: 0,
          lineNum: 0,
          prodType: "ggj",
        },
        {
          planNum: 0,
          finishNum: 0,
          lineNum: 0,
          prodType: "ljg",
        },
        {
          planNum: 0,
          finishNum: 0,
          lineNum: 0,
          prodType: "wp",
        },
        {
          planNum: 0,
          finishNum: 0,
          lineNum: 0,
          prodType: "xdg",
        },
      ],
      chartData: [
        {
          name: "钢拱架产线",
          value: 0,
        },
        {
          name: "小导管产线",
          value: 0,
        },
        {
          name: "网片产线",
          value: 0,
        },
        {
          name: "连接钢板产线",
          value: 0,
        },
      ],
      lineChart: {
        title: "",
        categories: [
          // "2024/8/23",
          // "2024/8/24",
          // "2024/8/25",
          // "2024/8/26",
          // "2024/8/27",
          // "2024/8/28",
          // "2024/8/29",
        ],
        values: [
          // [820, 932, 901, 934, 1290, 1330, 1320],
          // [420, 755, 396, 285, 1358, 1540, 320],
          // [564, 323, 201, 434, 1490, 1230, 877],
          // [874, 234, 342, 924, 1345, 1211, 750],
        ],
        name: [
          // "物料1", "物料2", "物料3", "物料4"
        ],
        
      },
    };
  },
  watch: {
		changeIndex: {
			deep: true,
			handler(val) {
				if(val=!0){
          const video = this.$refs.video;
          video.pause();
        }
			}
		}
	},
  created() {
    getAirNow().then((res) => {
      this.airData = res.data.now;
    });
    getDetail().then((res) => {
      this.projectInfo =
        res.data.content;
    });
  },
  mounted() {
    this.getTotalTasks();
    this.getInventoryList();
    this.getTaskRecordByDayList();
  },
  methods: {
    getTotalTasks() {
      getTotalTask().then((res) => {
        if (res.success) {
          this.totalTaskList = res.data;
          this.totalTaskList.forEach((elem) => {
            var lineNum = Math.round(
              (elem.finishNum / elem.planNum) * 20
            ).toFixed(0);
            elem["lineNum"] = parseInt(lineNum) > 20 ? 20 : parseInt(lineNum);
          });
        }
      });
    },
    getInventoryList() {
      getInventory().then((res) => {
        var data = [];
        if (res.success) {
          if (res.data.length > 0) {
            res.data.forEach((item) => {
              var name = this.getNameByProType(item.prodType);
              let obj = {
                name: name + "产线",
                value: item.inventory,
              };
              data.push(obj);
            });
            this.chartData = data;
          }
        }
      });
    },
    getTaskRecordByDayList() {
      getTaskRecordByDay().then((res) => {
        if (res.success) {
          let data = res.data;
          var name = [];
          var categories = [];
          var values = [];
          Object.keys(data).forEach((key) => {
            name.push(this.getNameByProType(key));
            var val = data[key];
            if (val != null && val.length > 0) {
              var arr = [];
              val.forEach((elem) => {
                arr.push(elem.finishNum);
                if (!categories.includes(elem.madeDate)) {
                  categories.push(elem.madeDate);
                }
              });
              values.push(arr);
            }
          });
          this.lineChart.name = name;
          this.lineChart.categories = categories;
          this.lineChart.values = values;
        }
      });
    },
    getNameByProType(prodType) {
      var name = "";
      switch (prodType) {
        case "ggj":
          name = "钢拱架";
          break;
        case "wp":
          name = "网片";
          break;
        case "xdg":
          name = "小导管";
          break;
        case "ljg":
          name = "连接钢板";
          break;
        default:
          break;
      }
      return name;
    },
    close(){
      this.isShow=!this.isShow
    }
  },
};
</script>
<style lang="scss" scoped>
.index-page {
  height: calc(100% - 140px);

  .page-child {
    position: relative;
    width: calc(100% - 100px);
    height: calc(100% - 50px);
    margin: 0px 50px 50px 50px;
    
    .model-child {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      background-image: url(../../assets/images/bg.png);
      background-size: cover; /* 让背景图片自适应 */
      background-position: center; /* 让背景图片居中 */
      background-repeat: no-repeat; /* 不重复背景图片 */
      z-index: 1;
    }

    .page-index {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
    }
  }

  .ku {
    position: relative;
    margin-left: 4%;
    margin-top: -10px;
    width: 67%;

    img {
      width: 100%;
      height: 90px;
    }

    .text {
      position: absolute;
      color: white;
      top: 12px;
      left: 5px;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      margin-left: 50px;
      display: flex;
      width: 100%;
    }

    .day {
      margin: 0 70px;
      font-size: 36px;
      color: #ff9900;
    }

    .shu {
      margin-left: 15%;

      .more {
        display: flex;

        img {
          width: 10px;
          height: 22px;
          margin-top: 5px;
        }
      }
    }

    .column {
      font-weight: 700;
      font-style: normal;
      font-size: 28px;
      color: #2de9db;
      margin-top: 10px;
    }
  }

  .left-page {
    width: 400px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;

    .plan {
      height: 310px;
      padding: 10px;
      height: 310px;
      border: 1px solid rgba(2, 231, 243, 1);
      position: relative;
      background-color: rgba(19, 43, 82, 0.7);

      .right {
        color: white;
        position: absolute;
        top: 10px;
        right: 10px;
        font-weight: bold;

        .yellow {
          color: #fccd1d;
        }
      }
    }

    .title {
      position: relative;

      .statistics {
        top: 6px;
        left: 10px;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #01f7fd;
        position: absolute;
      }
    }

    .progress {
      margin-left: 5px;
      margin-top: 20px;
      position: relative;
      height: 36px;

      .left {
        background-color: rgba(252, 205, 29, 0.3);
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        width: 100px;
        height: 46px;
        position: absolute;
        left: 0;
        top: 0;
      }

      .right1 {
        border-top: 46px solid rgba(252, 205, 29, 0.3);
        /* 梯形的高度 */
        border-right: 25px solid transparent;
        /* 右边斜面的宽度 */
        height: 0;
        width: 40px;
        /* 梯形的宽度 */
        position: absolute;
        left: 80px;
        top: 0px;
      }

      .blue {
        border-bottom: 40px solid rgba(1, 247, 253, 0.5);
        /* 梯形的高度 */
        border-left: 20px solid transparent;
        /* 右边斜面的宽度 */
        height: 0;
        width: 40px;
        /* 梯形的宽度 */
        position: absolute;
        left: 101px;
        top: 4px;
      }

      .blue1 {
        background-color: rgba(1, 247, 253, 0.5);
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        width: 230px;
        height: 40px;
        position: absolute;
        left: 141px;
        top: 4px;
      }

      .text {
        position: absolute;
        top: 10px;
        left: 10px;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
        color: #fccd1d;
      }

      .middle {
        display: flex;
        position: absolute;
        left: 130px;
        top: 15px;
      }

      .line {
        height: 20px;
        width: 3px;
        border-radius: 3px;
        background: white;
        margin-right: 5px;
      }

      .yellow {
        color: #fccd1d;
      }

      .total {
        position: absolute;
        left: 77%;
        top: 17px;
        text-align: right;
        font-size: 13px;
        color: white;
        width: 75px;
        font-weight: bold;
      }
    }
  }

  .right-page {
    width: 400px;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;

    .introduce {
      width: 100%;
      height: 258px;
      font-size: 15px;
      color: #fff;
      padding: 10px;
      /* 设置溢出行为，使滚动条出现 */
      overflow-y: auto;

      /* 针对Webkit内核的浏览器 */
      &::-webkit-scrollbar {
        /* 设置滚动条的宽度 */
        width: 8px;
      }

      /* 滚动条轨道 - 背景颜色/白底 */
      &::-webkit-scrollbar-track {
        background: rgba(7, 18, 58, 0.7);
        border-radius: 10px;
      }

      /* 滚动条的滑块部分 */
      &::-webkit-scrollbar-thumb {
        background: rgba(19, 43, 82, 0.7);
        border-radius: 10px;
      }

      /* 当鼠标悬停在滚动条滑块上时改变颜色 */
      &::-webkit-scrollbar-thumb:hover {
        background: rgba(19, 43, 82, 0.7);
      }
    }
  }

  .waring {
    width: 82%;
    height: 220px;
    margin-left: 11%;
    margin-top: 20px;
    overflow: hidden;
    overflow-y: scroll;

    .redline {
      width: 98%;
      background: rgb(144, 65, 73);
      color: white;
      border-radius: 5px;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;
      display: flex;
      align-content: center;
      font-size: 16px;
      font-weight: bold;
      padding-left: 10px;
    }

    .yellowline {
      width: 98%;
      background: rgb(179, 115, 34);
      color: white;
      border-radius: 5px;
      height: 32px;
      line-height: 32px;
      margin-top: 10px;
      display: flex;
      align-content: center;
      font-size: 16px;
      font-weight: bold;
      padding-left: 10px;
    }
  }

  .record {
    border: 1px solid rgba(2, 231, 243, 1);
    background-color: rgba(19, 43, 82, 0.7);
    position: relative;
    margin-left: 0px; 
    width: 100%;
    .top {
      display: flex;
      position: relative;

      .left {
        img {
          position: absolute;
          left: -15px;
          top: 0px;
          width: 30px;
          height: 30px;
        }
      }

      .right {
        img {
          opacity: 0.5;
          margin-top: 0px;
          width: 100%;
          height: 30px;
        }
      }

      .text {
        position: absolute;
        left: 20px;
        top: 3px;
        font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 18px;
        color: #00ffff;
      }
    }
  }

  .box {
    width: 100%;
    margin-top: 20px;
    border: 1px solid rgba(2, 231, 243, 1);
    margin-left: 2%;
    padding: 20px;
    display: flex;

    .right {
      width: 500px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      div {
        width: 250px;

        img {
          width: 248px;
          height: 140px;
        }
      }
    }
  }

  .environment {
    .temp {
      font-size: 45px;
      color: #02e7f3;
    }

    .title {
      font-size: 16px;
      margin-bottom: 10px;
      color: #fff;
    }

    .other {
      font-size: 20px;
      color: rgb(182, 211, 237);
    }

    .unit {
      font-size: 10px;
      margin-left: 5px;
      color: #fff;
    }
  }
}
.close{
  position: absolute;
  left: -20px;
  width: 20px;
  height: 20px;
  color: white;
  
}
// .el-icon-d-arrow-right{
//   transform: rotateY(90deg);
// }

.waring::-webkit-scrollbar {
  width: 2px;
}

/* 滚动条轨道 */
.waring::-webkit-scrollbar-track {
  background: #02e7f3;
  border-radius: 2px;
}

/* 滚动条滑块 */
.waring::-webkit-scrollbar-thumb {
  background: #904149;
  border-radius: 2px;
}

/* 滑块悬停效果 */
.waring::-webkit-scrollbar-thumb:hover {
  background: #b37322;
}
</style>
